<template>
  <div class="nav">
    <div class="nav-item">
      <div class="wangji-job">
        <RouterLink to="/wodedenglu"><span><</span></RouterLink>
        <div>个人资料</div>
        <span>保存</span>
      </div>
    </div>
    <div v-if="userInfo" class="information">
      <van-cell title="头像" is-link @click="showPopup" />
      <van-popup v-model:show="show" :style="{ padding: '64px' }"
        ><van-image
          round
          width="10rem"
          height="10rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </van-popup>
      <van-popup
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '30%' }"
      />
    </div>
    <div class="input">
      <van-field
        v-model="value"
        label="昵称"
        placeholder="请输入您的昵称"
        input-align="right"
      />
    </div>
    <div class="xingbie">
      <van-cell title="性别" is-link @click="showPopups" />
      <van-popup v-model:show="login" :style="{ padding: '64px' }"
        >123</van-popup
      >
    </div>
    <div class="aaa">
      <van-field
        v-model="value"
        label="电话号码"
        placeholder="请输入您的电话号码"
        input-align="right"
      /><van-field
        v-model="value"
        label="个性签名"
        placeholder="请输入您的个性签名"
        input-align="right"
      />
    </div>
  </div>
</template>
<style scoped>
.wangji-job {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f4f4f4;
}
.wangji-job div {
  color: rgb(9, 182, 116);
}
.information {
  border-bottom: 1px solid #f4f4f4;
}
.input {
  margin-top: 10px;
  border-bottom: 1px solid #f4f4f4;
}
.aaa {
  margin-top: 10px;
}
</style>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
const show = ref(false);
const login = ref(false);
const showPopup = () => {
  show.value = true;
};
const showPopups = () => {
  login.value = true;
};



userInfo:null
</script>
